<template>
  <div>
    <div>
        
        <div style="line-height: 20px;">节点筛选2：</div>
        <el-radio-group v-model="checked_node" size="mini" @change="doFilter">
          <el-radio-button label=''>全部</el-radio-button>
          <el-radio-button v-for="thisItem in all_rel_node" :label="thisItem" :key="thisItem"></el-radio-button>
          
        </el-radio-group>
       
    </div>
    <div>
        <div style="line-height: 20px;">关系筛选：</div>
        
        <el-checkbox-group v-model="rel_checkList" @change="doFilter">
          <el-checkbox v-for="thisItem in all_rel_type" :key="thisItem" :label="thisItem" />
        </el-checkbox-group>
    </div>
    
    <div style="height:calc(100vh - 50px);">
      <SeeksRelationGraph
        ref="seeksRelationGraph"
        :options="graphOptions"
        :on-node-click="onNodeClick"
        :on-line-click="onLineClick" />
    </div>
  
  </div>
</template>

<script>
import SeeksRelationGraph from 'relation-graph'
export default {
  name: 'app',
  components: { SeeksRelationGraph },
  data() {
    return {
      isShowCodePanel: false,  
      rel_checkList: [],
      all_rel_type:[],
      all_rel_node:[],
      checked_node:'',
      graphOptions: {
        defaultNodeBorderWidth: 0,
        defaultNodeColor: 'rgba(238, 178, 94, 1)',
        allowSwitchLineShape: true,
        allowSwitchJunctionPoint: true,
        defaultLineShape: 1,
        'layouts': [
          {
            'label': '自动布局',
            'layoutName': 'force',
            'layoutClassName': 'seeks-layout-force'
          }
        ],
        defaultJunctionPoint: 'border'
        // 这里可以参考"Graph 图谱"中的参数进行设置
      }
    }
  },
  mounted() {
    this.showSeeksGraph()

     //this.demoname = this.$route.params.demoname
  },
  created() {
  },

  methods: {
    doFilter(){
      console.log("==================进入关系筛选=================")
      var _all_lines = this.$refs.seeksRelationGraph.getLines()
       _all_lines.forEach(thisLine => {
        // 注意这里的line和json数据中link不一样，一条线（line）上可以附着多条关系(link),可以通过line.relations获取到这条线上所有的关系数据(link)
        var _isHideThisLine = true
        thisLine.relations.forEach(thisLink => {
          if (this.rel_checkList.indexOf(thisLink.data['relationType']) === -1) {
             thisLink.isHide = true
          } else {
            _isHideThisLine = false
            thisLink.isHide = false
          }
        })
        
        thisLine.opacity = _isHideThisLine ? 1 : 0.1
       })

      var _all_nodes=this.$refs.seeksRelationGraph.getNodes()
      _all_nodes.forEach(thisNode =>{
        var _isHideThisNode =false
        console.log('================节点=================='+this.checked_node)
        if(this.checked_node!=='')
        if(thisNode.data['treeName']!== this.checked_node){
            _isHideThisNode=true
        }
         thisNode.opacity = _isHideThisNode ? 0.1 : 1
      })
      
    },

   
    showSeeksGraph() {
      var __graph_json_data = {
        "rootId": "",
        "nodes": [
            {
                "id": "37934dac94a78997c56ccad1f8ce8305",
                "text": "部门",
                "data": {
                    "treeName": "组织结构对象"
                }
            },
            {
                "id": "4e17a6e358701a09cd235953e09504bb",
                "text": "井筒",
                "data": {
                    "treeName": "组织结构对象"
                }
            },
            {
                "id": "dc47e143d208adac9a2fb59218e00057",
                "text": "总公司",
                "data": {
                    "treeName": "组织结构对象"
                }
            },
            {
                "id": "efc3ba08edf652398307c609b7194054",
                "text": "分公司",
                "data": {
                    "treeName": "组织结构对象"
                }
            },
            {
                "id": "5cad35063615f05fafdf6760f18a6b89",
                "text": "油气田",
                "data": {
                    "treeName": "开发生产对象"
                }
            },
            {
                "id": "6279d65798313815d1c21b32328703e7",
                "text": "区块",
                "data": {
                    "treeName": "开发生产对象"
                }
            },
            {
                "id": "6e5141c740ec42b195d88b202acdb8dd",
                "text": "关键物料",
                "data": {
                    "treeName": "开发生产对象"
                }
            },
            {
                "id": "c286b0d996713723143ee9cb7be67da0",
                "text": "井",
                "data": {
                    "treeName": "开发生产对象"
                }
            },
            {
                "id": "ff5f1e2b63c746289035cc78b32cea8d",
                "text": "地质对象",
                "data": {
                    "treeName": "开发生产对象"
                }
            },
            {
                "id": "2382df0c826631c32e44dad122b0de81",
                "text": "区带",
                "data": {
                    "treeName": "地质对象"
                }
            },
            {
                "id": "248ff8d1286f621ab4505ae8bcb1049d",
                "text": "二级构造单元",
                "data": {
                    "treeName": "地质对象"
                }
            },
            {
                "id": "4cbc7c102e8442d4de5558ac84f6f012",
                "text": "XXX",
                "data": {
                    "treeName": "地质对象"
                }
            },
            {
                "id": "6989ea5d3711d2c999c6935b136c9b76",
                "text": "盆地",
                "data": {
                    "treeName": "地质对象"
                }
            },
            {
                "id": "6b302dd1c5a44b4b8f0e356bfab44b8d",
                "text": "油气藏",
                "data": {
                    "treeName": "地质对象"
                }
            },
            {
                "id": "b1fdd55d87fb4a70897c178c00aa870f",
                "text": "圈闭",
                "data": {
                    "treeName": "地质对象"
                }
            },
            {
                "id": "da321ad52f1b415781a3c230024eb787",
                "text": "一级构造单元",
                "data": {
                    "treeName": "地质对象"
                }
            },
            {
                "id": "08b306fd6b1563870391039656c8be7e",
                "text": "xxx01",
                "data": {
                    "treeName": "工程"
                }
            },
            {
                "id": "3fd462a9642548d28280b18b3a59a1f4",
                "text": "工程技术设备及工具",
                "data": {
                    "treeName": "工程"
                }
            },
            {
                "id": "c2395fba016ee5f9639ee35d4ee37410",
                "text": "XXXB",
                "data": {
                    "treeName": "工程"
                }
            }
        ],
        "links": [
            {
                "from": "6989ea5d3711d2c999c6935b136c9b76",
                "to": "da321ad52f1b415781a3c230024eb787",
                "text": "父级",
                "data": {
                    "relationType": "父级"
                }
            },
            {
                "from": "3fd462a9642548d28280b18b3a59a1f4",
                "to": "08b306fd6b1563870391039656c8be7e",
                "text": "父级",
                "data": {
                    "relationType": "父级"
                }
            },
            {
                "from": "efc3ba08edf652398307c609b7194054",
                "to": "37934dac94a78997c56ccad1f8ce8305",
                "text": "父级",
                "data": {
                    "relationType": "父级"
                }
            },
            {
                "from": "b1fdd55d87fb4a70897c178c00aa870f",
                "to": "6b302dd1c5a44b4b8f0e356bfab44b8d",
                "text": "父级",
                "data": {
                    "relationType": "父级"
                }
            },
            {
                "from": "dc47e143d208adac9a2fb59218e00057",
                "to": "efc3ba08edf652398307c609b7194054",
                "text": "父级",
                "data": {
                    "relationType": "父级"
                }
            },
            {
                "from": "37934dac94a78997c56ccad1f8ce8305",
                "to": "4e17a6e358701a09cd235953e09504bb",
                "text": "父级",
                "data": {
                    "relationType": "父级"
                }
            },
            {
                "from": "5cad35063615f05fafdf6760f18a6b89",
                "to": "6279d65798313815d1c21b32328703e7",
                "text": "父级",
                "data": {
                    "relationType": "父级"
                }
            },
            {
                "from": "6b302dd1c5a44b4b8f0e356bfab44b8d",
                "to": "4cbc7c102e8442d4de5558ac84f6f012",
                "text": "父级",
                "data": {
                    "relationType": "父级"
                }
            },
            {
                "from": "6279d65798313815d1c21b32328703e7",
                "to": "c286b0d996713723143ee9cb7be67da0",
                "text": "父级",
                "data": {
                    "relationType": "父级"
                }
            },
            {
                "from": "da321ad52f1b415781a3c230024eb787",
                "to": "248ff8d1286f621ab4505ae8bcb1049d",
                "text": "父级",
                "data": {
                    "relationType": "父级"
                }
            },
            {
                "from": "248ff8d1286f621ab4505ae8bcb1049d",
                "to": "2382df0c826631c32e44dad122b0de81",
                "text": "父级",
                "data": {
                    "relationType": "父级"
                }
            },
            {
                "from": "6279d65798313815d1c21b32328703e7",
                "to": "ff5f1e2b63c746289035cc78b32cea8d",
                "text": "父级",
                "data": {
                    "relationType": "父级"
                }
            },
            {
                "from": "ff5f1e2b63c746289035cc78b32cea8d",
                "to": "6e5141c740ec42b195d88b202acdb8dd",
                "text": "父级",
                "data": {
                    "relationType": "父级"
                }
            },
            {
                "from": "2382df0c826631c32e44dad122b0de81",
                "to": "b1fdd55d87fb4a70897c178c00aa870f",
                "text": "父级",
                "data": {
                    "relationType": "父级"
                }
            },
            {
                "from": "2382df0c826631c32e44dad122b0de81",
                "to": "c286b0d996713723143ee9cb7be67da0",
                "text": "子级",
                "data": {
                    "relationType": "子级"
                }
            },
            {
                "from": "37934dac94a78997c56ccad1f8ce8305",
                "to": "5cad35063615f05fafdf6760f18a6b89",
                "text": "子级",
                "data": {
                    "relationType": "子级"
                }
            },
            {
                "from": "37934dac94a78997c56ccad1f8ce8305",
                "to": "6279d65798313815d1c21b32328703e7",
                "text": "子级",
                "data": {
                    "relationType": "子级"
                }
            },
            {
                "from": "5cad35063615f05fafdf6760f18a6b89",
                "to": "efc3ba08edf652398307c609b7194054",
                "text": "父级",
                "data": {
                    "relationType": "父级"
                }
            },
            {
                "from": "6279d65798313815d1c21b32328703e7",
                "to": "efc3ba08edf652398307c609b7194054",
                "text": "父级",
                "data": {
                    "relationType": "父级"
                }
            },
            {
                "from": "c286b0d996713723143ee9cb7be67da0",
                "to": "efc3ba08edf652398307c609b7194054",
                "text": "父级",
                "data": {
                    "relationType": "父级"
                }
            }
        ],
        "treeTypes": [
            "开发生产对象",
            "组织结构对象",
            "工程",
            "地质对象"
        ],
        "lines": [
            "子级",
            "父级"
        ]
      }
      
      this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
        // 这些写上当图谱初始化完成后需要执行的代码
       // console.log("关系类型===================="+__graph_json_data.lines)
        this.all_rel_type=__graph_json_data.lines
       // this.all_rel_tree=__graph_json_data.treeTypes
        this.all_rel_node=__graph_json_data.treeTypes
         console.log(seeksRGGraph)
      })
    },
    onNodeClick(nodeObject, $event) {
      console.log($event)
      console.log('onNodeClick:', nodeObject)
    },
    onLineClick(lineObject, $event) {
      console.log($event)
      console.log('onLineClick:', lineObject)
    }
  }
}
</script>

<style>
  .c-my-node{
    background-position: center center;
    background-size: 100%;
    border:#ff8c00 solid 2px;
    height:80px;
    width:80px;
    border-radius: 40px;
  }
  .c-node-name{
    width:160px;margin-left:-40px;text-align:center;margin-top:85px;
  }
</style>